<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Update CSS Skills with </h2>
    <div class="controls">

        <div class="fields">
            <label for="spacing">Spacing</label>
            <!-- for属性lable标签为“spacing”而标记 -->
            <!-- 输入控件 html5 更加强大的表单类型 -->
            <input type="range" min ="10" max = "200" 
                   id="spacing" name="spacing" value="100" data-sizing="px">
            <span id="spacing_res">150px</span>
        </div>

        <div class="fields">
            <label for="blur">Blur</label>
            <!-- for属性lable标签为“spacing”而标记 -->
            <!-- 输入控件 html5 更加强大的表单类型 -->
            <input type="range" min ="0" max = "25" 
                   id="blur" name="blur" value="10" data-sizing="px">
            <span id="blur_res">15px</span>
        </div>

        <div class="fields">
            <label for="color">Base Color</label>
            <!-- for属性lable标签为“spacing”而标记 -->
            <!-- 输入控件 html5 更加强大的表单类型 -->
            <input type="color" id="color" name="color" value="#ffc600"  >
            <span id="color_res">#ffc600</span>
        </div>

    </div>
    <script>
        const inputs = document.querySelectorAll('.fields input');
        //console.log(inputs);
        //const spacingInput = document.querySelector('#spacing');
        //const blurInput = document.querySelector('#blur');
        inputs.forEach(function(input){
            //console.log(input)
            //抽象的能力
            //把数组的每一项都作为参数来操作
            input.addEventListener('change',function(event){
            const res = '#' + this.id + '_res' ;
            //console.log(res);
            document.querySelector(res)
                    .innerText=this.value
                    +(this.dataset.sizing?this.dataset.sizing:'');
            })
        })
        //每个功能单独实现用以下代码
        // spacingInput.addEventListener('change',function(event){
        //     // console.log(event.target.value,this);
        //     //js是事件驱动的语言
        //     // 函数有一个指针
        //     // this 在js中最重要的基础
        //     // 事件处理函数中，this指向事件发生的对象
        //     console.log(this.value)
        //     document.querySelector('#spacing_res').innerText = this.value
        //     +this.dataset.sizing;

        // })
        // blurInput.addEventListener('change',function(event){
        //     console.log(this.value)
        //     document.querySelector('#blur_res').innerText = this.value
        //     +this.dataset.sizing;
        // })
    </script>
</body>
</html>